import React from 'react'
import App from './App'
import {Link,Route,Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
import {loginout} from './Auth.redux.js'
function 二营() {
    return <h1>二营</h1>
}
function 骑兵连() {
    return <h1>骑兵连</h1>
}
@connect(
    state=>state.auth,
    {loginout}
)
class Dashboard extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        const redirectToLogin=<Redirect to='/login'></Redirect>
        const match=this.props.match;
            const app=(
                
            <div>
                <h2>独立团</h2>
                {this.props.isAuth?<button onClick={this.props.loginout}>注销</button>:null}
                <ul>
                    <li>
                        <Link to={`${match.url}`}>一营</Link>
                    </li>
                    <li>
                        <Link to={`${match.url}/erying`}>二营</Link>
                    </li>
                    <li>
                        <Link to={`${match.url}/qibinglian`}>骑兵连</Link>
                    </li>
                </ul>

                 <Route path={`${match.url}`} exact component={App} ></Route> 
                 <Route path={`${match.url}/erying`} component={二营}></Route>
                 <Route path={`${match.url}/qibinglian`}  component={骑兵连}></Route> 
            </div> )
            return this.props.isAuth?app:redirectToLogin
        
    }
}
export default Dashboard
